<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumbConfig = breadcrumbConfig></breadcrumb>

    <!-- 面包屑导航 teamManage -->
    <div class="contentDetails">
      <div class="titleBtn" >
        <div class="title titleblue">订单详情</div>
      </div>
    </div>
    <div class="contentDetails" v-if="modifyOrder">
      <div class="box" >
        <Steps :stepInfo="statusNode" :statustype ='auditStatus.status'></Steps>
      </div>
    </div>
    <!-- statusNode 1:待支付，2:发货前，3：待签收，4：已完成，5：已关闭，6：售后 -->
    <!-- 审核状态 -->
    <!-- auditStatus.status 审核状态： 1：待审核，2：已审核，3：审核不通过，4：已取消 -->
    <div  v-if="auditStatus.status==3&&statusNode.closeStatus!=1&&modifyOrder" class="contentDetails" style="display: flex; justify-content: space-between">
      <div>
        <div style="display: flex; align-items: center">
            <img
              src="../../assets/icon_guanbi.png"
              style="margin-right: 8px"
            />
            <span  class="boldSize">
              审核不通过
            </span>
        </div>
             <div style="margin-top: 20px;">
                <span>审批人：{{auditStatus.userName}}</span><span style="padding-left:20px">审批时间：{{auditStatus.updateTime?auditStatus.updateTime:'-'}}</span>
             </div>
             <div class="boldSize16" style="margin-top:20px">
               <p style="color: #4c81eb;">不通过原因</p>
               <p style="margin-top: 5px;">{{auditStatus.reason?auditStatus.reason:'-'}}</p>
            </div>
      </div>
      </div>
      <!-- 已关闭 -->
       <div  v-if="statusNode.closeStatus==1&&modifyOrder" class="contentDetails" style="display: flex; justify-content: space-between">
          <div >
            <div style="display: flex; align-items: center">
                <img
                  src="../../assets/icon_guanbi.png"
                  style="margin-right: 8px"
                />
                  <span  class="boldSize">
                    订单已关闭
                  </span>
              </div>
              <div style="margin-top:18px">
                <span>操作人：{{closeMessage.userName?closeMessage.userName:'-'}}</span><span style="padding-left:20px">关闭时间：{{closeMessage.closeTime?closeMessage.closeTime:'-'}}</span>
              </div>
              <div style="margin-top: 16px; font-size: 16px; font-weight: 400;  ">
                <span style="color:#4168E7;">关闭原因</span>
                <span style="margin-top:5px;margin-left: 20px;">{{closeMessage.cause?closeMessage.cause:'-'}}</span>
              </div>
            </div>
      </div>
      <!-- 物流进行中 -->
      <!-- 要根据statusNode里面的状态来按照UI设计图上的状态显示 -->
        <div v-if="modifyOrder&&auditStatus.status!=3&&statusNode.closeStatus!==1&&(statusNode.subsetStatus==3||statusNode.subsetStatus==4||statusNode.subsetStatus==22||statusNode.status==3||statusNode.status==4)" class="contentDetails" style="display: flex; justify-content: space-between">
          <div >
            <div style="display: flex; align-items: center">
                <img
                  src="../../assets/icon_wanc.png"
                  style="margin-right: 8px"
                />
                  <span  class="boldSize">
                    {{
                    statusNode.subsetStatus==3?'备货中，等待卖家备货':''||
                    (statusNode.subsetStatus==22||statusNode.subsetStatus==4)?'已备货，等待卖家发货':''||
                    statusNode.status==3?'等待买家确认签收':''||
                    statusNode.status==4?'已签收':''
                    }}
                    </span>
            </div>
            <div class="approver">
              收货信息
            </div>
            <!-- <p class="Manner">{{logisticsMessage.status!=4?'送货方式':''|| logisticsNode.data&&logisticsNode.data.indexOf('本人')==-1?'运输中':'签收是本人'}}</p> -->
            <p v-if="statusNode.subsetStatus==3||statusNode.subsetStatus==4||statusNode.subsetStatus==22" class="size14" style="margin-top:6px">使用物流配送</p>
            <p v-if=" statusNode.status==3||statusNode.status==4"  class="size14" style="margin-top:6px">
<!--              {{statusNode.status}}{{logisticsMessage.logisticsNumber}}-->
              <span>{{logisticsMessage.logisticsCompanyName}}</span><span style="padding-left:10px">{{logisticsMessage.logisticsNumber}}</span>
            </p>
          </div>
            <div class="logisticsBtn">
              <!-- v-if="logisticsMessage.status == 4" -->
              <el-button class="whiteBtn" v-if="statusNode.status==3||statusNode.status==4"   @click="examine"
                >查看物流</el-button
              >
              <el-button class="whiteBtn" v-if="statusNode.subsetStatus==4&&(parArray.indexOf('deliverGoodsCode') != -1||parArrayTwo.indexOf('wuliu_deliverGoodsCode') != -1)&&orgName=='物流中心'"  @click="shipments"
                >发 货</el-button>
            </div>
        </div>
    <!-- 订单信息 -->
      <div class="contentDetails">
        <div class="title">订单信息</div>
          <div class="order_details">
            <div class="order_details_box">
               <div class="order_details_item"><span class="order_details_title">订单号</span><span class="order_details_value">{{orderMessage.orderNo?orderMessage.orderNo:'-'}}</span></div>
               <div class="order_details_item"><span class="order_details_title">关联订单号</span><span class="order_details_value">{{orderMessage.platformOrderNo?orderMessage.platformOrderNo:'-'}}</span></div>
            </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">订单类型</span><span class="order_details_value">{{orderMessage.orderTypeLabel?orderMessage.orderTypeLabel:'-'}}</span></div>
                <div class="order_details_item"><span class="order_details_title">入线时间</span><span class="order_details_value">{{orderMessage.ditchTime?orderMessage.ditchTime:'-'}}</span></div>
             </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">支付方式</span><span class="order_details_value">{{orderMessage.payTypeCN?orderMessage.payTypeCN:'-'}}</span></div>
                 <div class="order_details_item"><span class="order_details_title">跟进客服</span><span class="order_details_value">{{orderMessage.follower?orderMessage.follower:'-'}}</span></div>
             </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">平台</span><span class="order_details_value">{{orderMessage.platformName?orderMessage.platformName:'-'}}</span></div>
                <div class="order_details_item"><span class="order_details_title">部门</span><span class="order_details_value">{{orderMessage.orgName?orderMessage.orgName:"-"}}</span></div>
              </div>
            <div class="blankBox"></div>
             <div class="order_details_box">
                <div class="order_details_item"><span class="order_details_title">来源渠道</span><span class="order_details_value">{{orderMessage.userDitch?orderMessage.userDitch:'-'}}</span></div>
                <div class="order_details_item"><span class="order_details_title">订单分类</span><span class="order_details_value">{{orderMessage.orderGenerateTypeLabel?orderMessage.orderGenerateTypeLabel:'-'}}</span></div>
              </div>
              <!-- <div class="details_item"><span class="details_title">店铺</span><span class="details_value">{{orderMessage.shopName?orderMessage.shopName:'-'}}</span></div> -->
              <!-- <div class="details_item"><span class="details_title">店铺ID</span><span class="details_value">{{orderMessage.shopId?orderMessage.shopId:'-'}}</span></div> -->
              <!-- <div class="details_item"><span class="details_title">达人ID</span><span class="details_value">{{orderMessage.talentShowId?orderMessage.talentShowId:'-'}}</span></div> -->
              <!-- <div class="details_item"><span class="details_title">达人昵称</span><span class="details_value">{{orderMessage.talentShowName?orderMessage.talentShowName:'-'}}</span></div> -->
          </div>
        <div class="remarkMessage">
          <div class="remarkMessage_remark">
            <div class="remarkMessage_remark_item">
              <span class="fourteenTitle">备注信息</span>
              <span class="fourteenDetails" >{{orderMessage.remarks?orderMessage.remarks:'暂无备注 '}}</span>
              <span v-if="statusNode.status==1||statusNode.status==5"><el-button  :disabled="statusNode.closeStatus==1?true:false" type="text"  @click="addRemarkBtn">添加备注</el-button></span>
            </div>
            <div  class="remarkMessage_remark_item">
              <span class="fourteenTitle">审批备注</span>
               <span class="fourteenDetails" >
                <span  v-for="(item,index) in records" :key="index">
                  <span style="margin-right:20px" v-if="item.userName!=''">
                    {{item.userName}} : {{item.reason}}
                  </span>
                  <span style="margin-right:20px" v-else>
                    {{'暂无备注'}}
                  </span>
                </span>
               </span>
          </div>
         </div>
          <!-- <div class="fourteenDetails" style="margin-top: 10px">{{orderMessage.remarks?orderMessage.remarks:'暂无备注 '}}</div> -->

        </div>
      </div>

      <!-- 购买信息 -->
      <div class="contentDetails">
        <div class="title">购买信息</div>
          <div class="contentDetails_box">
            <div class="contentDetails_item">
              <div class="title_too">收货信息</div>
              <div class="details" >
                  <div class="details_item"><span class="details_title fourteen">收货人</span><span class="details_value fourteen">{{buyMessage.postName?buyMessage.postName:'-'}}</span></div>
                  <div class="details_item"><span class="details_title fourteen">联系方式</span><span class="details_value fourteen">{{buyMessage.postContact?buyMessage.postContact:'-'}}</span></div>
                  <div class="details_item addressWidth"><span class="details_title fourteen">收货地址</span><span class="details_value fourteen" >{{buyMessage.postProvinceCod?buyMessage.postProvinceCode + buyMessage.postCityCode + buyMessage.postDetailedAddress:buyMessage.postAddress}}</span><span v-if="auditStatus.status==1&&(statusNode.status==1||statusNode.subsetStatus==2||statusNode.subsetStatus==3||statusNode.subsetStatus==22)&&orderMessage.canDoApprove==1&&modifyOrder"  style="padding-left:20px"><el-button :disabled="statusNode.closeStatus==1?true:false" type="text" @click="amendAddress('addressEdit')">修改</el-button></span></div>
                </div>
            </div>
            <div class="borderWire"></div>
            <div class="contentDetails_item">
                <div class="title_too">买家信息</div>
                <div class="details" >
                    <div class="details_item"><span class="details_title fourteen">客户姓名</span><span class="details_value fourteen">{{buyMessage.userName?buyMessage.userName:'-'}}</span></div>
                    <div class="details_item"><span class="details_title fourteen">客户电话</span><span class="details_value fourteen">{{buyMessage.userPhone?buyMessage.userPhone:'-'}}</span></div>
                    <div class="details_item"><span class="details_title fourteen">客户意向</span><span class="details_value fourteen">{{buyMessage.userIntentionLabel?buyMessage.userIntentionLabel:'-'}}</span></div>
                    <div class="details_item"><span class="details_title fourteen">买家留言</span><span class="details_value fourteen">{{buyMessage.userRemarks?buyMessage.userRemarks:'-'}}</span></div>
                </div>
            </div>
          </div>
        </div>
      <!-- 商品信息 -->
    <div class="contentDetails">
      <div class="titleBtn">
        <div class="title" style="margin-bottom: 20px">商品信息</div>
        <!-- " -->
        <div v-if="orderMessage.sysUserId==userId&&(parArray.indexOf('afterSaleCode') != -1)&&(statusNode.status==4||statusNode.status==3)"><el-button @click="handlerAfterSale"  class="afterSales" type="danger" plain :disabled="goodsListDialog.length === 0">售后</el-button></div>
      </div>
        <el-table :data="goodsMessage" :header-cell-style="{background: '#fafafa',color:'#333333'}">
          <el-table-column
            prop="updatedTime"
            label="商品信息"
            headerAlign="left" >
            <template slot-scope="props">
                <div style="text-align: left">
                  <div><span>{{ props.row.goodsName?props.row.goodsName:"-" }}</span><span  v-if="props.row.goodsType=='3'"  class="gift">赠品</span></div>
                  <p>{{ props.row.goodsSkuName?props.row.goodsSkuName:'-' }}</p>
                  <p>商品编码：{{ props.row.goodsNo	?props.row.goodsNo:'-' }}</p>
<!--<p>商家编码：{{ props.row.orderNo?props.row.orderNo:'-'	 }}</p>-->
<!--                  <p>商家编码：-</p>-->
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="authListStr"
            label="单价/数量"
            header-align="right"
            >
             <template slot-scope="props">
                <div style="text-align: right">
                 <p>￥{{ props.row.unitPrice }}</p>
                 <p>×&nbsp;{{ props.row.quantity }}</p>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="authListStr"
            label="小计"
            header-align="right">
             <template slot-scope="props">
                <div style="text-align: right">
                  <p>实付￥{{ props.row.amountPaid }}</p>
                  <p>￥{{ props.row.subtotal }}</p>
                </div>
            </template>
          </el-table-column>
           <el-table-column

            prop="authListStr"
            label="其他信息"
            header-align="right">
             <template slot-scope="props">
                <div style="text-align: right">
                  <p v-if="props.row.subsetStatus!='售后关闭'&&props.row.status!=0">{{props.row.statusCn}}:￥{{ props.row.refundMoney }}</p>
                  <p v-if="props.row.subsetStatus">{{ props.row.subsetStatus=='无售后'?'-':props.row.subsetStatus }}</p>
                  <p v-if="props.row.subsetStatus!='售后关闭'&&props.row.afterSaleReason">售后原因:{{ props.row.afterSaleReason?props.row.afterSaleReason:'-' }}</p>

                </div>
            </template>
          </el-table-column>
        </el-table>

      <div class="fourteenDetails_title"
      >
        优惠信息
      </div>
      <div
         v-if="orderMessage.platformDiscount==0 && orderMessage.shopDiscount==0"
        class="fourteenDetails"
        style="
          margin-top: 12px;
          border-bottom: 1px solid #ededed;
          padding-bottom: 20px;
        "
      >
        无优惠
      </div>
      <div class="fourteenDetails" v-else>
        <div class="fourteenDetails_item">
            <div class="fourteenDetails_item_title">平台优惠</div>
            <div class="red" >￥{{orderMessage.platformDiscount}}</div>
        </div>
         <div class="fourteenDetails_item">
            <div class="fourteenDetails_item_title">商家优惠</div>
            <div  class="red">￥{{orderMessage.shopDiscount}}</div>
        </div>
         <div class="fourteenDetails_item ">
            <div class="fourteenDetails_item_title fontWeight red">优惠总额</div>
            <div  class=" fontWeight red">￥{{Number(orderMessage.shopDiscount)+Number(orderMessage.platformDiscount)}}</div>
        </div>

      </div>

      <div class="total_prices">
        <span style="color: #666666; margin-right: 15px"
          >商品总价：￥{{orderMessage.totalAmount?orderMessage.totalAmount:'0'}}</span>
        <span style="color: #666666; margin-right: 15px">运费：￥{{orderMessage.freightAmount?orderMessage.freightAmount:'0'}}</span>
        <span style="color: red; margin-right: 15px">优惠：￥0</span>
        <span class="fontWeight" style="color: #444; margin-right: 15px">应付：￥{{orderMessage.receivableAmount?orderMessage.receivableAmount:'0'}}</span>
        <span  class="fontWeight" style="color: #6190ed">（实付：￥{{orderMessage.receivedAmount?orderMessage.receivedAmount:"0"}}）</span>
      </div>

    </div>
    <div class="botton_btn">
      <div >
              <!-- <el-button v-if="statusNode.status==1||statusNode.status==2||statusNode.status==3||statusNode.status==4" @click="moneyReceiving('selectPay')" type="success" style="width: 120px;height: 36px;line-height: 0;">生成收款码</el-button> -->
              <!-- <el-button v-if="detailType!=1&&detailType!=6" type="warning" style="width: 120px;height: 36px;line-height: 0;">支付尾款</el-button> -->
              <!-- <el-button  v-if="statusNode.status==5||statusNode.status==4||statusNode.status==3"  type="primary" @click="tradinRecord"  style="width: 120px;height: 36px;line-height: 0;background: #7763DD;border:0">交易记录</el-button> -->
              <el-button v-if="statusNode.closeStatus!=1&&shenheState&&parArray.indexOf('auditCode') != -1&&auditStatus.status==1&&this.auditState==true&&modifyOrder&&orderMessage.canDoApprove==1" class="whiteBtn" type="primary" @click="handlerAudit" plain >审核</el-button>
              <el-button v-if="statusNode.subsetStatus==3&&logistics&&(parArray.indexOf('stockUpCode') != -1||parArrayTwo.indexOf('wuliu_stockUpCode') != -1)&&orgName=='物流中心'&&modifyOrder" class="whiteBtn" type="primary" @click ='stockUp' plain style="width: 120px;height: 36px;line-height: 0;">备货</el-button>
            </div>
            <div>

              <el-button v-if="auditStatus.status==3&&parArray.indexOf('anewSubmitCode') != -1&&orderMessage.sysUserId==userId&&statusNode.closeStatus!=1&&modifyOrder"  type="primary" @click="handlerResubmit" plain style="width: 120px;height: 36px;line-height: 0;">重新提交</el-button>
              <!-- v-if="detailType==1||detailType==2||detailType==3"  -->
              <span v-if="orgName!='物流中心'">
                  <el-button v-if="(auditStatus.status==1||statusNode.status==1||statusNode.subsetStatus==1||statusNode.subsetStatus==2||statusNode.subsetStatus==3)&&(orderMessage.sysUserId==userId)&&parArray.indexOf('closeOrderCode') != -1&&modifyOrder"  @click="handlerCloseOrder('closeOrder')" type="primary" :disabled="statusNode.closeStatus==1?true:false"  style="width: 120px;height: 36px;line-height: 0;">关闭订单</el-button>
              </span>
              <span v-if="orgName=='物流中心'">
                    <!-- 订单子状态 statusNode.subsetStatus==3待备货，4：待发货，6：等待买家收货  22：已备货-->
                  <el-button v-if="(auditStatus.status==1||statusNode.status==1||statusNode.subsetStatus==1||statusNode.subsetStatus==2||statusNode.subsetStatus==3)&&(orgName=='物流中心')&&parArrayTwo.indexOf('guanbiwuliudingdan') != -1&&modifyOrder"  @click="handlerCloseOrder('closeOrder')" type="primary" :disabled="statusNode.closeStatus==1?true:false"  style="width: 120px;height: 36px;line-height: 0;">关闭订单</el-button>
              </span>
              <el-button v-if="statusNode.status==3&&parArray.indexOf('affirmsignForCode') != -1&&modifyOrder"   type="primary" @click="takeDeliveryOfGoods " style="width: 120px;height: 36px;line-height: 0;">确认收货</el-button>

            </div>
    </div>

    <el-dialog
      :append-to-body="true"
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :width="dialog.width"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
    <!-- 查看物流 -->
      <template  v-if="dialog.type =='logisticsInformation'" class="VerticalSteps">
          <StepLogistics :stepProgress="logisticsNode"></StepLogistics>
      </template>
      <!-- 发货弹框 -->
       <template  v-if="dialog.type =='shipmentsCode'" >
          <el-form ref="wuliu" :model="wuliu" :rules="wuliuRules" label-width="80px">
          <el-form-item
            label="出库仓库"
            label-width="100px"
            prop="warehouse"
          >
            <el-select filterable  v-model="wuliu.warehouse" placeholder="请选择出库仓库" style="width:100%">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in commWarehouseList" :key="index"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item
            label="物流公司"
            label-width="100px"
            prop="company"
          >
           <el-select filterable  v-model="wuliu.company" placeholder="请选择物流公司" style="width:100%">
               <el-option :label="item.dictName" :value="item.dictId" v-for="(item, index) in dictionaries.courier_company" :key="index"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="物流单号" label-width="100px" prop="odd">
            <el-input
              oninput="value=value.replace(/[^\w_]/g,'')"
              v-model.trim="wuliu.odd"
            ></el-input>
          </el-form-item>
           <div class="dialogBtn" >
             <el-button @click="dialog.visible = false">取 消</el-button>
             <el-button type="primary" @click="dialogSubmitwuliu('wuliu')">确 定</el-button>
            </div>
        </el-form>
      </template>
      <!-- 新增收货地址 -->
      <template v-if="dialog.type == 'addAddress'" class="addAddress">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="收货人姓名" label-width="100px" prop="userName">
            <el-input v-model.trim="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" label-width="100px" prop="phone">
            <el-input
              oninput="value=value.replace(/[^0-9.]/g,'')"
              :maxLength="11"
              v-model.trim="form.phone"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="收货地址"
            label-width="100px"
            prop="addressValue"
          >
            <el-cascader
              v-model="form.addressValue"
              :options="addressOptions"
              clearable
              filterable
              @change="onChangeAddress"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="详细地址"
            label-width="100px"
            prop="detailedAddress"
          >
            <el-input v-model.trim="form.detailedAddress"></el-input>
            <el-checkbox
              v-model="form.isDefault"
              :false-label="0"
              :true-label="1"
              >设为默认
            </el-checkbox>
          </el-form-item>
           <div class="dialogBtn" >
             <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="dialogSubmit('form')"
            >确 定</el-button
          >
      </div>
        </el-form>
      </template>
      <!-- 添加备注 -->
      <template v-if="dialog.type=='addRemark'">
        <el-form label-width="50px">
          <el-form-item label="备注">
            <el-input type="textarea"  :rows = '5' placeholder="请输入备注" v-model="remark">
            </el-input>
          </el-form-item>
        </el-form>
         <div class="dialogBtn">
            <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddRemark">确 定</el-button>

      </div>
      </template>
    <!-- 修改默认地址 -->
     <template v-if="dialog.type=='addressAmend'">
      <span class="addressHeader">
          <i class="el-icon-circle-plus-outline" style="color: #4168e7"></i>
          <el-button style="color: #4168e7;" type="text" @click="addAddress('Address')">新增收货地址</el-button>
        </span>
      <el-table
        :data="siteDataList"
        :header-cell-style="{background: '#F8F8F9',color:'#333333'}"
      >
        <el-table-column label="收货人" prop="userName"></el-table-column>
        <el-table-column label="手机号码" prop="phone"></el-table-column>
        <el-table-column label="地区" prop="userName">
          <template slot-scope="props">
            <p>
              {{
                props.row.provinceCode?props.row.provinceCode +
                props.row.cityCode +
                props.row.regionCode:'-'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="详细地址" prop="detailedAddress">
        </el-table-column>
        <el-table-column label="默认地址">
          <template slot-scope="props">
            <el-switch
              v-model="props.row.isDefault"
              :active-value="1"
              :inactive-value="0"
              @change="defaultSite(props.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="props">
            <el-button
              type="text"
              @click="employ(props.row)"
              >使用
            </el-button>
            <el-button

              type="text"
              @click="dialogEdit('editAddress', props.row)"
              >编辑
            </el-button>
            <el-button

              style="color: red"
              type="text"
              @click="dialogDelete(props.row.id)"
              >删除
            </el-button>

          </template>
        </el-table-column>

      </el-table>

      </template>

    </el-dialog>
    <!-- 收款码弹框 -->
    <el-dialog
      :title="dialogToo.title"
      :visible.sync="dialogToo.visible"
      :width="dialogToo.width"
      append-to-body
      :before-close="handleCloseToo">
      <!-- 支付方式 -->
        <template v-if="dialogToo.type == 'selectPay'">
            <el-radio-group v-model="setPay.payment" @change="selectPayment">
              <!-- <el-radio class="setPay_payment" label="0">微信商户号支付</el-radio> -->
              <el-radio  label="1">在线支付</el-radio>
            </el-radio-group>
            <div class="setPayDialogBtn">
              <div>
                  <el-checkbox-group v-model="setPay.payDefault" @change="selectPayDefault">
                    <el-checkbox label="1" name="type">设为默认</el-checkbox>
                  </el-checkbox-group>
              </div>
              <div >
                  <el-button class="setPay_payment_btn_quxiao" @click="handleCloseToo">取 消</el-button>
                  <el-button class="setPay_payment_btn_queren" type="primary" @click="confirmSelectPay">确 定</el-button>
              </div>
            </div>
        </template>

          <!-- 在线支付 -->
         <template v-if="dialogToo.type == 'payMoney'">
            <div class="payMoney">
              <div>
                <p class="payMoney_should">应付:￥{{orderMessage.receivableAmount}}</p>
                <p class="payMoney_already">已收:￥200.00</p>
              </div>
               <div class="payMoney_box">
                 <span class="payMoney_money">支付金额</span><span class="payMoney_mo">￥</span>
                  <el-input-number
                      :controls="false"
                      :mix="0"
                      type="number"
                      :precision="2"
                      v-model="paymentAmount"
                      style="width:110px"
                     >
                  </el-input-number>
              </div>
              <div class="payMoney_text">
                <span class="payMoney_text_item">总计: 共{{totalQuantity}}件</span><span class="payMoney_text_item">商品总价: ￥{{totalPrices}}</span><span class="payMoney_text_item">运费: ￥{{orderMessage.freightAmount}}</span>
              </div>
            </div>
             <div class="dialogBtnright">
              <div >
                  <el-button class="setPay_payment_btn_quxiao" @click="handleCloseToo">取 消</el-button>
                  <el-button class="setPay_payment_btn_queren" type="primary" @click="onlinePayment">确 定</el-button>
              </div>
            </div>
         </template>

          <!-- 关闭订单 -->
          <template v-if="dialogToo.type == 'closeOrder'">
               <el-radio-group v-model="setCloseOrder">
                <el-radio v-for="(item,index) in dictionaries.order_main_close_reason" :key="index" class="setPay_payment" :label="item.dictId">{{item.dictName}}</el-radio>
              </el-radio-group>
              <div class="dialogBtnright" style="margin-top:20px">
                  <el-button class="setPay_payment_btn_quxiao" @click="handleCloseToo">取 消</el-button>
                  <el-button class="setPay_payment_btn_queren" type="primary" @click="handlerCloseOrderSubmit">确 定</el-button>
              </div>
          </template>
          <!-- 审核 -->
          <template v-if="dialogToo.type == 'audit'">
              <div class="audit_title">是否审核通过？</div>
                  <el-radio-group v-model="selectShenhe" @change="handlerSelect">
                        <!-- <el-radio class="setPay_payment" label="0">微信商户号支付</el-radio> -->
                    <el-radio  label="2">通过</el-radio>
                    <el-radio  label="3">不通过</el-radio>
                  </el-radio-group>
                  <div v-if="selectShenhe==3">
                       <el-form label-width="40px" class="audit_textarea" >
                          <el-form-item label="原因">
                            <el-input placeholder="请输入原因"  maxlength="200" show-word-limit  type="textarea" v-model="cause"></el-input>
                          </el-form-item>
                        </el-form>
                  </div>
                  <div class="dialogBtnright" style="margin-top:20px">
                      <el-button class="setPay_payment_btn_quxiao" @click="handleCloseToo">取 消</el-button>
                      <el-button class="setPay_payment_btn_queren" type="primary" @click="handlerAuditsubmit">确 定</el-button>
                  </div>
            </template>
    </el-dialog>
  <!-- 售后 -->
     <el-dialog
        :title="dialogAfterSale.title"
        :visible.sync="dialogAfterSale.visible"
        :width="dialogAfterSale.width"
        :before-close="handleshouhouClose"
        append-to-body
        class="dialogafterSaleClass"
      >
        <template v-if="dialogAfterSale.type == 'afterSale'">
            <div slot="title" class="deletegroup_title">
              <span class="deletegroup_title_item" >售后</span>
            </div>
            <div style="margin-bottom:20px">
                <el-button class="setPay_payment_btn_queren"  type="primary" @click="applyDialog">申请售后</el-button>
            </div >

        <el-table :data="goodsListDialog" :header-cell-style="{background: '#fafafa',color:'#333333'}"  @selection-change="handleSelectionChange">
         <el-table-column width="50">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.$index"
                  v-model="multipleSelection"
                  @change.native="getCurrentRow(scope.row)"
                  style="color: #fff"
                >
                  <span>&nbsp;</span>
                </el-radio>
              </template>
            </el-table-column>
          <el-table-column
            prop="updatedTime"
            label="商品信息"
            headerAlign="left" >
            <template slot-scope="props">
                <div style="text-align: left">
                  <div><span>{{ props.row.goodsName?props.row.goodsName:"-" }}</span><span  v-if="props.row.goodsType=='3'"  class="gift">赠品</span></div>
                  <p>{{ props.row.goodsSkuName?props.row.goodsSkuName:'-' }}</p>
                  <p>商品编码：{{ props.row.goodsNo	?props.row.goodsNo:'-' }}</p>
<!--                  <p>商家编码：{{ props.row.orderNo?props.row.orderNo:'-'	 }}</p>-->
<!--                  <p>商家编码：-</p>-->
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="authListStr"
            label="单价/数量"
            header-align="right"
            >
             <template slot-scope="props">
                <div style="text-align: right">
                 <p>￥{{ props.row.unitPrice }}</p>
                 <p>x{{ props.row.quantity }}</p>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="authListStr"
            label="小计"
            header-align="right">
             <template slot-scope="props">
                <div style="text-align: right">
                  <p>实付￥{{ props.row.amountPaid }}</p>
                  <p>￥{{ props.row.subtotal }}</p>
                </div>
            </template>
          </el-table-column>
           <el-table-column

            prop="authListStr"
            label="其他信息"
            header-align="right">
             <template slot-scope="props">
                <div style="text-align: right">
                  <p v-if="props.row.subsetStatus!='售后关闭'&&props.row.status!=0">{{props.row.statusCn}}:￥{{ props.row.refundMoney }}</p>
                  <p v-if="props.row.subsetStatus">{{ props.row.subsetStatus=='无售后'?'-':props.row.subsetStatus }}</p>
                  <p v-if="props.row.subsetStatus!='售后关闭'&&props.row.afterSaleReason">售后原因:{{ props.row.afterSaleReason?props.row.afterSaleReason:'-' }}</p>
                </div>
            </template>
          </el-table-column>
        </el-table>
        </template>
        <template v-if="dialogAfterSale.type == 'applyAfterSale'" class="applyAfterSale">
            <div slot="title" class="deletegroup_title">
              <span class="deletegroup_title_item" >售后</span>
            </div>
            <el-form :model="ruleForm" :rules="rulesRuleForm" ref="ruleForm"  class="demo-ruleForm" v-loading="loading">
                <el-form-item label="退款类型" prop="afterType">
                  <el-radio-group v-model="ruleForm.afterType">
                    <el-radio v-for="(item,index) in dictionaries.after_type" :key="index" :label="item.dictId">{{item.dictName}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="售后原因" prop="afterSaleReason">
                  <el-select v-model="ruleForm.afterSaleReason" placeholder="请选择活动区域" style="width:100%">
                    <el-option v-for="(item,index) in dictionaries.after_sale_reason" :key="index" :label="item.dictName" :value="item.dictId"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  prop="refundMoney"  label-width="100px" style="width:290px">
                  <span slot="label">
                    退款金额（最多<span style="color:red">{{afterMoney}}</span>元）
                  </span>
                  <el-input v-model="ruleForm.refundMoney" @input="v=>ruleForm.refundMoney=v.replace(/^(\d*\.?\d{0,2}).*/,'$1')" placeholder="请输入退款金额"></el-input>
                </el-form-item>
                <el-form-item label="退款说明（选填）" prop="refundExplain">
                  <el-input type="textarea"  placeholder="请输入退款说明" maxlength="200" show-word-limit v-model="ruleForm.refundExplain"></el-input>
                </el-form-item>
                <el-form-item label="上传凭证（选填）最多3张" prop="appendixList">
                  <upload-picture :limit="3" :file-list="ruleForm.appendixList" @getUrl="getUrl" @handleRemove="handleRemove" />
                </el-form-item>
            </el-form>
             <div class="dialogBtnright" style="margin-top:20px">
                      <el-button class="setPay_payment_btn_quxiao" @click="handledeleteClose">取 消</el-button>
                      <el-button class="setPay_payment_btn_queren" type="primary" @click="submitAfterSale('ruleForm')" :loading="loading">确 定</el-button>
              </div>
        </template>
         <template v-if="dialogAfterSale.type == 'record'">
            <div slot="title" class="deletegroup_title">
              <span class="deletegroup_title_item" >{{dialogAfterSale.title}}</span>
            </div>
            <lb-table :column="columnRecord"  :data="transactionRecord"></lb-table>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import LbTable from '../../components/lb-table/lb-table'
import Steps from '../../components/zw-steps.vue'
import breadcrumb from '@/components/breadcrumb'
import VerticalSteps from '../../components/vertical-steps.vue'
import uploadPicture from '@/components/upload/picture.vue'
import StepLogistics from './components/StepLogistics.vue'
import mixinsCommon from './mixins/common'
import addressData from '@/components/addressData.js'
export default {
  mixins: [mixinsCommon],
  name: 'orderDetails',
  components: {
    LbTable,
    Steps,
    breadcrumb,
    VerticalSteps,
    uploadPicture,
    StepLogistics
  },
  data () {
    return {
      loading: false,
      orgName: '', //
      userId: '', //
      afterMoney: '', // 单个商品的退款金额
      multipleSelectionList: '',
      wuliu: {
        warehouse: '',
        company: '',
        odd: ''
      },
      lastTime: '0', // 防抖使用
      logistics: '', // 从物流页面进入
      shenheState: '', // 有值表示从审核页面进入
      selectShenhe: '', // 是否审核通过
      transactionRecord: [], // 交易记录
      paymentAmount: '', // 在线支付金额
      totalQuantity: 0, // 商品总数量
      totalPrices: '', // 商品总价
      closeMessage: '', // 关闭订单信息
      logisticsNode: {}, // 物流节点信息
      auditStatus: '', // 审核状态
      orderNo: '', // 订单编号
      statusNode: {}, // 状态节点
      rowId: '', // 地址ID
      addressOptions: [], // 地区 options
      multipleSelection: [], // 售后弹框列表单选选值
      siteDataList: '', // 收获地址列表数据
      goodsMessage: [], // 获取订单商品信息
      goodsListDialog: [], // 弹窗订单商品信息
      logisticsMessage: '', // 物流公司及物流单号
      buyMessage: '', // 购买信息
      orderId: '', // 订单ID
      orderMessage: '', // 订单信息
      cause: '',
      setPay: {
        payDefault: '', // 设为默认
        payment: ''
      },
      payMoney: '', // 支付金额

      // 新增收货地址参数
      form: {
        userName: '', // 姓名
        phone: '', // 联系电话
        provinceCode: '', // 省
        cityCode: '', // 市
        regionCode: '', // 区
        detailedAddress: '', // 详细地址
        addressValue: [],
        isDefault: 0
      },
      ruleForm: {
        afterSaleReason: '', // 售后原因（字典分组：after_sale_reason）	body	true	integer(int32)
        afterType: '', // 售后类型（字典分组：after_type）	body	true	integer(int32)
        appendixList: [], //	退款凭证记录（附件）列表	body	false	array	售后订单退款凭证
        customerUserId: '', //	退货客户id	body	true	integer(int64)
        orderId: '', //	订单id	body	true	integer(int64)
        refundExplain: '', //	退款说明	body	false	string
        refundMoney: '', //	退款金额	body	true	number
        sysUserId: '', //	跟进客服id	body	true	integer(int64)
        totalNum: '' //	总数量	body	true	integer(int64)
      },
      // 新增收货地址参数校验
      rules: {
        userName: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
                callback(new Error('请输入中文'))
              } else {
                // 校验通过
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 6, max: 11, message: '手机号码少于6位超过11位', trigger: 'blur' }
        ],
        addressValue: [
          { required: true, message: '请选择地址', trigger: 'change' }
        ],
        detailedAddress: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ]
      },
      rulesRuleForm: {
        afterType: [
          { required: true, message: '请选择退款类型', trigger: 'change' }
        ],
        afterSaleReason: [
          { required: true, message: '请选择售后原因', trigger: 'change' }
        ],
        refundMoney: [
          { required: true, message: '请选择输入退款金额', trigger: 'blur' }
        ]
      },

      // 发货相关弹框参数开始
      shipmentsForm: {

      },
      wuliuRules: { // 表格验证
        warehouse: [
          { required: false, message: '请选择出货仓库', trigger: 'change' }
        ],
        company: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        odd: [
          { required: true, message: '请填写物流单号', trigger: 'blur' }
        ]
      },
      // 发货相关弹框参数结束
      shenhe: '2', // 审核
      setCloseOrder: '', // 关闭订单

      dialog: { visible: false, title: '', type: '', width: '' },
      dialogToo: { visible: false, title: '', type: '', width: '' },
      dialogAfterSale: { visible: false, title: '', type: '', width: '' }, //
      breadcrumbConfig: {
        list: [
          {
            title: '订单管理',
            type: '#ff0000',
            path: ''
          },
          {
            title: '客服订单',
            type: '0',
            path: '/ordersList'
          },
          {
            title: '订单详情',
            type: '1'
          }

        ]
      },
      remark: '',
      activeNum: 2,
      roleForm: {
        name: ''
      },
      columnRecord: [

        {
          label: '交易订单号',
          prop: 'tradingNo'

        }, {
          label: '支付类型',
          prop: 'payTypes'
        },
        {
          label: '创建时间',
          prop: 'createdTime'
        },
        {
          label: '支付时间',
          prop: 'payTime'
        },
        {
          label: '支付金额',
          render: (h, scope) => {
            return (
              <span>￥{scope.row.payMoney}</span>
            )
          }
        },
        {
          label: '状态',
          render: (h, scope) => {
            return (
              <span>{scope.row.payStatus == 1 ? '成功' : '失败'}</span>
            )
          }
        }
      ],
      columnAfterSale: [
        {
          type: 'selection'
        },
        {
          label: '商品信息',
          prop: 'authListStr'

        }, {
          label: '单价/数量',
          prop: 'updatedTime'
        },
        {
          label: '小计',
          prop: 'updatedTime'
        },
        {
          label: '其他信息',
          prop: 'updatedTime'
        }
      ],

      page: {
        pageNo: 1,
        pageSize: 10,
        totalNum: 0,
        currentPage: 1
      },
      detailType: '',
      payStatus: '', // 在线支付
      parArray: [],
      parArrayTwo: [],
      auditState: false,
      reallyName: '',
      modifyOrder: true,
      records: []
    }
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'orderListCode'
    )
    if (params.length > 0) {
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code)
      })
    }
    console.log(this.parArray)
    const paramsTwo = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'logisticsOrder'
    )
    if (paramsTwo.length > 0) {
      paramsTwo[0].buttonList.forEach((item) => {
        this.parArrayTwo.push(item.code)
      })
    }

    this.userId = JSON.parse(sessionStorage.getItem('user_id'))
    this.orgName = JSON.parse(sessionStorage.getItem('userInfo')).departmentName

    this.orderId = this.$route.query.id
    this.orderNo = this.$route.query.orderNo
    this.shenheState = this.$route.query.approveStatus // 审核页面进入需要显示审核按钮
    this.logistics = this.$route.query.logistics// 物流页面进入需要显示备货按钮
    // this.modifyOrder = this.$route.query.awaitSubmit
    // console.log(this.modifyOrder, 'this.modifyOrder')
    if (this.logistics) {
      this.breadcrumbConfig.list[1].title = '物流订单'
      this.breadcrumbConfig.list[1].path = '/logisticsOrderList'
    }
    if (this.$route.query.audit) {
      this.breadcrumbConfig.list[0].title = '审核管理'
      this.breadcrumbConfig.list[0].path = ''
      this.breadcrumbConfig.list[1].title = '订单审核'
      this.breadcrumbConfig.list[1].path = 'examination/orderList'
    }
    this.reallyName = JSON.parse(sessionStorage.getItem('userInfo')).reallyName

    this.getOrderStatus()// 订单信息状态节点
    this.getOrderDetail()// 获取订单信息
    this.getBuyInfo()// 购买信息
    this.getOrderGoodsInfo()// 获取订单商品信息
    this.getExamine()// 物流公司及物流单号
    this.trimAddressData() // 初始化地区数据
    this.getProcess()// 审批结果信息）订单状态信息查询
    // this.getlogistics()// 查询物流节点信息
    this.getCommWarehouse()// 出货仓库
    this.getHistory()// 查询审批进度
  },
  methods: {
    // 查询审批进度
    getHistory () {
      this.axios
        .post('/neworder/process/task/getHistory', {
          busId: this.orderNo,
          funcCode: '1',
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          console.log(res, 'res')

          if (res.code === 0) {
            this.records = []
            const shenheName = res.data.records[res.data.records.length - 1].userName
            if (shenheName.indexOf(this.reallyName) >= 0) {
              this.auditState = true
            } else {
              this.auditState = false
            }
            res.data.records.forEach(item => {
              console.log(item, 'item')
              if (item.resultFlag != '-1') {
                this.records.push(item)
              }
            })
            console.log(this.records, 'this.records')
          } else {
            this.auditState = false
          }
        })
    },
    // 申请售后单选
    getCurrentRow (row) {
      this.multipleSelectionList = row
      this.serviceId = row.id
      this.afterMoney = row.subtotal
    },
    // 发货
    dialogSubmitwuliu (wuliu) {
      this.$refs[wuliu].validate((valid) => {
        if (valid) {
          const data = {
            orderNo: this.orderNo,
            commWarehouseId: this.wuliu.warehouse,
            logisticsCompany: this.wuliu.company,
            logisticsNumber: this.wuliu.odd
          }
          this.$api.updateLogistics(data).then((res) => {
            if (res.code == 0) {
              this.$message.success('发货成功！')
              this.dialog.visible = false
              this.getOrderStatus()
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          return false
        }
      })
    },
    // 出货仓库列表
    getCommWarehouse () {
      const params = { pageNo: 1, pageSize: 10000 }
      this.$api.commWarehouse(params).then((res) => {
        this.commWarehouseList = res.data.list
      }).catch((err) => {
        console.log(err)
      })
    },
    // 备货
    stockUp () {
      this.$confirm('是否备货已选中的订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          ids: [this.orderNo]
        }
        this.$api.logisticsDoArrange(data).then(res => {
          if (res.code == 0) {
            this.$message.success('操作成功！')
            this.getOrderStatus()
          }
        })
      }).catch(() => {

      })
    },
    // 监听选择审核是否通过
    handlerSelect (e) {
      if (e == 2) {
        this.cause = ''
      }
    },
    // 审核确定
    handlerAuditsubmit () {
      if (this.selectShenhe == 3 && this.cause == '') {
        return this.$message.warning('请填写审核不通过原因！')
      }
      if (this.selectShenhe) {
        const data = {
          orderNo: [this.orderNo],
          resultFlag: this.selectShenhe,
          reason: this.cause
        }
        this.$api.afterDoApprove(data).then(res => {
          if (res.code == 0) {
            this.$message.success('操作成功！')
            this.dialogToo.visible = false
            this.getOrderStatus()
            this.getProcess()
          }
        })
      }
    },
    // 订单信息状态节点
    getOrderStatus () {
      const data = {
        id: this.orderId
      }
      this.$api.getOrderStatusByOrderId(data).then(res => {
        if (res.code == 0) {
          // if (res.data.closeStatus == 1) { // 如果是已关闭状态就吧其他状态设置为0不显示
          //   res.data.subsetStatus = '0'
          // }
          this.statusNode = res.data
          if (this.$route.query.awaitSubmit) {
            if (res.data.status == 99) {
              this.modifyOrder = false
            }
          }

          console.log(this.statusNode, 'this.statusNode')
          if (res.data.closeStatus == 1) {
            this.getCloseStatus()// 订单关闭信息
          }
        }
      })
    },
    // 获取订单信息
    getOrderDetail () {
      const data = {
        id: this.orderId
      }
      this.$api.getOrderDetail(data).then(res => {
        if (res.code == 0) {
          if (this.dictionaries.order_pay_type.length !== 0 && res.data.payType) {
            if (this.dictionaries.order_pay_type.find(e => { return e.dictId == res.data.payType })) {
              res.data.payTypeCN = this.dictionaries.order_pay_type.find(e => { return e.dictId == res.data.payType }).dictName
            }
          }
          this.orderMessage = res.data
          // this.modifyOrder = this.$route.query.awaitSubmit
          console.log(this.orderMessage, 'this.orderMessage ')
        }
      })
    },
    // 获取订单购买信息
    getBuyInfo () {
      const data = {
        id: this.orderId
      }
      this.$api.getBuyInfo(data).then(res => {
        if (res.code == 0) {
          console.log(res.data, '获取订单购买信息')
          this.buyMessage = res.data
        }
      })
    },
    // （关闭订单）订单状态信息查询
    getCloseStatus () {
      const data = {
        id: this.orderId
      }
      this.$api.getCloseStatusByOrderId(data).then(res => {
        if (res.code == 0) {
          if (this.dictionaries.order_main_close_reason.length !== 0 && res.data.closeReason) {
            res.data.cause = this.dictionaries.order_main_close_reason.find(e => { return e.dictId == res.data.closeReason }).dictName
          }
          this.closeMessage = res.data
        }
      })
    },
    // 交易记录
    byOrderIdList () {
      const params = {
        orderId: this.orderId
      }
      this.$api.byOrderIdList(params).then(res => {
        if (res.code == 0) {
          res.data.map((item) => {
            if (this.dictionaries.order_pay_type.length !== 0) {
              item.payTypes = this.dictionaries.order_pay_type.find(e => { return e.dictId == item.payType }).dictName
            }
          })
          this.transactionRecord = res.data
        }
      })
    },
    // 获取订单商品信息
    getOrderGoodsInfo () {
      const data = {
        id: this.orderId
      }
      this.$api.getOrderGoodsInfo(data).then(res => {
        if (res.code == 0) {
          res.data.forEach((item) => {
            this.totalPrices = Number(this.totalPrices) + Number(item.subtotal)
            this.totalQuantity += item.quantity
            if (item.status == 0) {
              item.statusCn = '无售后'
            } else if (item.status == 1) {
              item.statusCn = '售后进行中'
            } else if (item.status == 2) {
              item.statusCn = '售后完成'
            } else if (item.status == 3) {
              item.statusCn = '部分售后'
            } else if (item.status == 4) {
              item.statusCn = '售后已关闭'
            } else {
              item.statusCn = ''
            }
          })
          this.goodsMessage = res.data
          console.log(this.goodsMessage, 'this.goodsMessage')
          const tempArr = []
          res.data.forEach(item => {
            // if(item.subsetStatus && item.subsetStatus.indexOf('售后中') > -1){
            if (item.status == 0 || item.status == null) { tempArr.push(item) }
          })
          this.goodsListDialog = [...tempArr]
        }
      })
    },
    // （审批结果信息）订单状态信息查询
    getProcess () {
      const data = {
        orderNo: this.orderNo
      }
      this.$api.getProcessByOrderId(data).then(res => {
        if (res.code == 0) {
          this.auditStatus = res.data
          console.log(this.auditStatus, 'auditStatus')
        }
      })
    },
    // 重新提交订单
    getResubmitOrder () {
      const data = {
        id: this.orderId
      }
      this.$api.resubmitOrder(data).then(res => {
        if (res.code == 0) {
        }
      })
    },
    // 订单支付
    getOnlinePay () {
      const data = {
        orderId: this.orderId,
        receivedAmount: 100
      }
      this.$api.onlinePay(data).then(res => {
        if (res.code == 0) {
        }
      })
    },
    // 发货
    shipments () {
      this.wuliu.warehouse = ''
      this.wuliu.company = ''
      this.wuliu.odd = ''
      this.dialog.type = 'shipmentsCode'
      this.dialog.title = '发货'
      this.dialog.width = '450px'
      this.dialog.visible = true
      this.$nextTick(() => {
        this.$refs['wuliu'].resetFields()
      })
    },
    // 交易记录按钮
    tradinRecord () {
      this.dialogAfterSale.visible = true
      this.dialogAfterSale.title = '交易记录'
      this.dialogAfterSale.type = 'record'
      this.dialogAfterSale.width = '800px'
      this.byOrderIdList()
    },
    // 售后弹框列表多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 新增收货地址
    addAddress (type, row) {
      if (this.dialog.type == 'addressAmend') {
        this.dialog.visible = false
        this.dialog.type = 'addAddress'
        this.dialog.title = '新增地址'
        this.dialog.visible = true
        this.dialog.width = '450px'
        this.form.userName = ''
        this.form.phone = ''
        this.form.detailedAddress = ''
        this.form.addressValue = ''
        this.form.isDefault = 0
        this.form.provinceCode = ''
        this.form.cityCode = ''
        this.form.regionCode = ''
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      }
    },

    // 编辑/修改提交数据
    dialogSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialog.title == '编辑') {
            const data = {
              userId: this.orderMessage.customerId,
              userName: this.form.userName,
              phone: this.form.phone,
              provinceCode: this.form.provinceCode, // 省
              cityCode: this.form.cityCode, // 市
              regionCode: this.form.regionCode, // 区
              detailedAddress: this.form.detailedAddress,
              isDefault: this.form.isDefault,
              id: this.rowId
            }
            const that = this
            // 获取当前时间的时间戳
            const now = new Date().valueOf()
            // 第一次点击
            if (this.lastTime == 0) {
              this.$api.categoryEditaddress(data).then((res) => {
                if (res.code == 0) {
                  this.$message.success('修改成功')
                  this.dialog.visible = false
                  this.shippingAddressList()
                }
              }).catch((err) => {
                console.log(err)
              })
              that.lastTime = now
            } else {
              if ((now - that.lastTime) > 2000) {
                // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
                that.lastTime = now
                this.$api.categoryEditaddress(data).then((res) => {
                  if (res.code == 0) {
                    this.$message.success('修改成功')
                    this.dialog.visible = false
                    this.shippingAddressList()
                  }
                }).catch((err) => {
                  console.log(err)
                })

                // 添加自己要调用的方法
              } else {
                console.log('不触发')
              }
            }
          } else {
            const data = {
              userId: this.orderMessage.customerId,
              userName: this.form.userName,
              phone: this.form.phone,
              provinceCode: this.form.provinceCode, // 省
              cityCode: this.form.cityCode, // 市
              regionCode: this.form.regionCode, // 区
              detailedAddress: this.form.detailedAddress,
              isDefault: this.form.isDefault
            }
            const that = this
            // 获取当前时间的时间戳
            const now = new Date().valueOf()
            // 第一次点击
            if (this.lastTime == 0) {
              this.$api.categoryAddaddress(data).then((res) => {
                if (res.code == 0) {
                  this.$message.success('新增成功')
                  this.dialog.visible = false
                  this.shippingAddressList()
                }
              }).catch((err) => {
                console.log(err)
              })
              that.lastTime = now
            } else {
              if ((now - that.lastTime) > 2000) {
                // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
                that.lastTime = now
                this.$api.categoryAddaddress(data).then((res) => {
                  if (res.code == 0) {
                    this.$message.success('新增成功')
                    this.dialog.visible = false
                    this.shippingAddressList()
                  }
                }).catch((err) => {
                  console.log(err)
                })

                // 添加自己要调用的方法
              } else {
                console.log('不触发')
              }
            }
          }
        } else {
          return false
        }
      })
    },
    // 地区修改
    onChangeAddress (val) {
      const addressOptions = this.addressOptions
      for (let i = 0; i < val.length; i++) {
        if (i === 0) {
          this.form.provinceCode = addressOptions[val[0]].label
          continue
        }
        if (i === 1) {
          this.form.cityCode = addressOptions[val[0]].children[val[1]].label
          continue
        }
        if (i === 2) {
          this.form.regionCode = addressOptions[val[0]].children[val[1]].children[val[2]].label
          continue
        }
      }
    },
    // 初始化地区数据
    trimAddressData () {
      const arr = []
      for (const province in addressData) {
        const childrenCity = []
        for (const city in addressData[province]) {
          const childrenArea = []
          addressData[province][city].forEach((e, i) => {
            childrenArea.push({ title: '市区', label: e, value: i })
          })
          childrenCity.push({ title: '城市', label: city, children: childrenArea, value: city })
        }
        arr.push({ title: '省份', label: province, children: childrenCity, value: province })
      }
      // 修改 value 值
      arr.forEach((e, i) => {
        e.value = i
        e.children.forEach((ee, ii) => {
          ee.value = ii
        })
      })
      this.addressOptions = arr
    },
    // 编辑按钮
    dialogEdit (type, row) {
      // this.$refs.addCustomers.clickData()
      this.form.addressValue = []
      this.addressOptions.find(province => {
        if (province.label == row.provinceCode) {
          this.form.addressValue.push(province.value)

          province.children.find((city) => {
            if (city.label == row.cityCode) {
              this.form.addressValue.push(city.value)
            }
            city.children.find((district) => {
              if (district.label == row.regionCode) {
                this.form.addressValue.push(district.value)
              }
            })
          })
        }
      })
      this.dialog.type = 'addAddress'
      this.dialog.title = '编辑'
      this.dialog.width = '450px'
      this.dialog.visible = true
      this.form.userName = row.userName
      this.form.phone = row.phone
      this.form.detailedAddress = row.detailedAddress
      this.form.isDefault = row.isDefault
      this.rowId = row.id
      this.form.provinceCode = row.provinceCode
      this.form.cityCode = row.cityCode
      this.form.regionCode = row.regionCode
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 添加备注确定按钮
    confirm () {

    },
    // 审核按钮
    handlerAudit () {
      this.dialogToo.type = 'audit'
      this.dialogToo.visible = true
      this.dialogToo.title = '审核'
      this.dialogToo.width = '600px'
    },
    // 生成收款码确定弹框
    confirmSelectPay () {
      if (this.dialogToo.type == 'selectPay') {
        this.dialogToo.visible = false
        if (this.setPay.payment != 1) {
          this.$message.warning('请选择支付方式！')
        }
        if (this.setPay.payment == 1) { // 1表示在线支付
          this.dialogToo.type = 'payMoney'
          this.dialogToo.visible = true
          this.dialogToo.title = '在线支付'
          this.dialogToo.width = '640px'
          this.paymentAmount = 0.00
        }
      }
    },
    onlinePayment () {
      const data = {
        orderId: this.orderId,
        receivedAmount: this.paymentAmount
      }
      this.$api.onlinePay(data).then(res => {
        if (res.code == 0) {
          this.$message.success('操作成功！')
          this.dialogToo.visible = false
        }
      })
    },
    // 修改收货地址
    amendAddress () {
      this.dialog.visible = true
      this.dialog.title = '修改收货地址'
      this.dialog.type = 'addressAmend'
      this.dialog.width = '1274px'
      this.shippingAddressList()
    },
    // 收货地址列表数据
    shippingAddressList () {
      const params = {
        id: this.orderMessage.customerId// 用户id
      }
      this.$api.categoryShippingAddress(params).then((res) => {
        if (res.code == 0) {
          this.siteDataList = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 修改收货地址弹框列表里面的使用地址
    employ (row) {
      const data = {
        id: this.orderId, //	订单物流id	body	true	integer(int64)
        postAddress: row.provinceCode + row.cityCode + row.regionCode + row.detailedAddress, //	收货地址	body	true	string
        postCityCode: row.cityCode ? row.cityCode : '', //	收货市级code	body	true	string
        postContact: row.phone, //	收货人联系方式	body	true	string
        postDetailedAddress: row.detailedAddress, //	收货详细地址	body	true	string
        postName: row.userName, //	收货人	body	true	string
        postProvinceCode: row.provinceCode ? row.provinceCode : '', //	收货省级code	body	true	string
        postRegionCode: row.regionCode ? row.regionCode : '' //	收货区级code	body	true	string
      }
      this.$api.updateOrderAddress(data).then((res) => {
        if (res.code == 0) {
          this.$message.success('使用成功！')
          this.dialog.visible = false
          this.getBuyInfo()
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 是否设置为默认地址
    defaultSite (id) { this.setCategoryDefaultSite(id) },
    // 设置默认地址
    setCategoryDefaultSite (id) {
      const params = {
        id: id
      }
      this.$api.categoryDefaultSite(params).then((res) => {
        if (res.code == 0) {
          this.$message.success('设置成功！')
          this.shippingAddressList()
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 删除地址
    dialogDelete (id) {
      this.$confirm('是否删除该地址？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          addressId: id,
          userId: this.buyMessage.id
        }
        this.$api.categoryDeleteAddress(params).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.shippingAddressList()
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改收货地址
    updateOrderAddress () {
      const data = {
        id: this.orderId
      }
      this.$api.updateOrderAddress(data).then(res => {
      })
    },
    // 生成收款码
    moneyReceiving (e) {
      this.setPay.payment = '0'
      this.setPay.payDefault = false
      this.dialogToo.visible = true
      this.dialogToo.title = '选择支付方式'
      this.dialogToo.type = 'selectPay'
      this.dialogToo.width = '640px'
      const setPayPayment = localStorage.getItem('setPayPayment')
      const setPayPayDefault = localStorage.getItem('setPayPayDefault')
      if (setPayPayment && setPayPayDefault) {
        this.setPay.payment = '1'
        this.setPay.payDefault = true
      } else {
        this.setPay.payment = '0'
        this.setPay.payDefault = false
      }
    },
    // 查看物流，添加备注关闭弹框
    handleClose () {
      this.dialog.visible = false
    },
    // 修改地址
    handleCloseToo () {
      this.dialogToo.visible = false
      this.setPay.payment = ''
      this.payMoney = ''
      this.shenhe = '2'
    },
    // 查看物流按钮
    examine () {
      this.dialog.title = '查看物流'
      this.dialog.type = 'logisticsInformation'
      this.dialog.width = '948px'
      this.dialog.visible = true
      this.getlogistics()// 查询物流节点信息
    },
    // 物流信息
    getlogistics () {
      const data = {
        id: this.orderId,
        logisticsType: 1
      }
      this.$api.getLogisticsInfo(data).then(res => {
        if (res.code == 0) {
          res.data.data.map(item => {
            item.year = item.time.split(' ')[0]
            item.dataTime = item.time.split(' ')[1]
          })
          this.logisticsNode = res.data
        }
      })
    },
    // （物流信息）订单状态信息查询
    getExamine () {
      const params = {
        id: this.orderId
      }
      this.$api.getLogisticsStatusByOrderId(params).then(res => {
        if (res.code == 0) {
          if (this.dictionaries.order_status_logistics.length !== 0 && res.data.status) {
            res.data.statusCn = this.dictionaries.order_status_logistics.find(e => { return e.dictId === res.data.status }).dictName
          }
          if (this.dictionaries.courier_company.length !== 0 && res.data.logisticsCompany) {
            res.data.logisticsCompanyCN = this.dictionaries.courier_company.find(e => { return e.dictId === res.data.logisticsCompany }).dictName
          }
          // console.log(logisticsCompany)
          this.logisticsMessage = res.data
          // this.logisticsMessage.logisticsCompany = logisticsCompany
        }
      })
    },

    // 添加备注按钮
    addRemarkBtn () {
      this.dialog.title = '添加备注'
      this.dialog.type = 'addRemark'
      this.dialog.width = '30%'
      this.dialog.visible = true
      this.remark = ''
      if (this.orderMessage.remarks) {
        this.remark = this.orderMessage.remarks
      }
    },
    // 备注弹框确定
    confirmAddRemark () {
      const data = {
        id: this.orderId,
        remarks: this.remark
      }
      this.$api.updateRemark(data).then(res => {
        if (res.code == 0) {
          this.$message.success('添加成功')
          this.dialog.visible = false
          this.getOrderDetail()
        }
      })
    },
    // 关闭订单按钮
    handlerCloseOrder () {
      this.setCloseOrder = ''
      this.dialogToo.visible = true
      this.dialogToo.title = '关闭订单'
      this.dialogToo.type = 'closeOrder'
      this.dialogToo.width = '500px'
    },
    // 关闭订单确定
    handlerCloseOrderSubmit () {
      let apis
      if (this.orgName == '物流中心') {
        apis = this.$api.wuliuCloseOrder
      } else {
        apis = this.$api.closeOrder
      }
      const data = {
        id: this.orderId,
        closeReason: this.setCloseOrder
      }
      apis(data).then(res => {
        if (res.code == 0) {
          this.$message.success('操作成功')
          this.dialogToo.visible = false
          this.getOrderStatus()
        }
      })
    },
    // 选择支付方式
    selectPayment (e) {
      if (e == 1) { // 在线支付
        this.payStatus = e
      }
    },
    // 售后
    handlerAfterSale () {
      // console.log(this.dictionaries.after_sale_reason)
      this.multipleSelection = ''

      this.dialogAfterSale.visible = true
      this.dialogAfterSale.title = '售后'
      this.dialogAfterSale.type = 'afterSale'
      this.dialogAfterSale.width = '1000px'
    },
    // 售后弹框关闭
    handledeleteClose () {
      this.dialogAfterSale.visible = false
      this.$refs['ruleForm'].resetFields()
    },
    handleshouhouClose () {
      this.dialogAfterSale.visible = false
    },
    // 申请售后按钮弹框
    applyDialog () {
      if (this.dialogAfterSale.type == 'afterSale' && this.multipleSelection.length != 0) {
        this.dialogAfterSale.visible = false
        this.dialogAfterSale.type = 'applyAfterSale'
        this.dialogAfterSale.visible = true
        this.dialogAfterSale.title = '售后'
        this.dialogAfterSale.width = '640px'
        this.ruleForm.afterSaleReason = ''
        this.ruleForm.afterType = ''
        this.ruleForm.appendixList = []
        this.ruleForm.customerUserId = ''
        this.ruleForm.orderId = ''
        this.ruleForm.refundExplain = ''
        this.ruleForm.refundMoney = ''
        this.ruleForm.sysUserId = ''
        this.ruleForm.totalNum = ''
      } else {
        this.$message.warning('请选择需要售后的商品！')
      }
    },
    // 售后申请提交
    submitAfterSale (formName) {
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const idList = []
          const afterDetailList = []
          const dataList = {}
          const skuId = []

          if (this.multipleSelectionList) {
            dataList.goodsId = this.multipleSelectionList.goodsId
            dataList.goodsSkuId = this.multipleSelectionList.goodsSkuId
            afterDetailList.push(dataList)
          }
          const data = {
            afterDetailList: afterDetailList,
            afterSaleReason: this.ruleForm.afterSaleReason, // 售后原因（字典分组：after_sale_reason）	body	true	integer(int32)
            afterType: this.ruleForm.afterType, // 售后类型（字典分组：after_type）	body	true	integer(int32)
            appendixList: this.ruleForm.appendixList, //	退款凭证记录（附件）列表	body	false	array	售后订单退款凭证
            customerUserId: this.buyMessage.userId, //	退货客户id	body	true	integer(int64)
            orderId: this.orderId, //	订单id	body	true	integer(int64)
            refundExplain: this.ruleForm.refundExplain, //	退款说明	body	false	string
            refundMoney: this.ruleForm.refundMoney, //	退款金额	body	true	number
            sysUserId: JSON.parse(sessionStorage.getItem('userInfo')).id, //	跟进客服id	body	true	integer(int64)
            totalNum: afterDetailList.length//	总数量	body	true	integer(int64)
          }
          this.$api.applyAfterSales(data).then(res => {
            if (res.code == 0) {
              this.$message.success('操作成功')
              this.dialogAfterSale.visible = false
              this.getOrderDetail()
              this.getOrderStatus()
              this.getOrderGoodsInfo()
            }
            setTimeout(_ => {
              this.loading = false
            }, 1000)
          })
        } else {
          this.loading = false
          return false
        }
      })
    },
    // 获取上传图片文件的链接
    getUrl (getUrl) {
      const obj = {}
      // obj.afterId = this.orderId
      obj.resourceUrl = this.ImgHttps + getUrl
      obj.url = this.ImgHttps + getUrl
      obj.mainFlag = 0
      this.ruleForm.appendixList.push(obj)
      // if(e.mainImage && e.mainImage.indexOf("http://fenxiao.muruji.com/") !== 0){e.mainImage = this.ImgHttps + e.mainImage}
      // this.ruleForm.appendixList.push({ mainFlag: 0, url: this.ImgHttps + getUrl })
    },
    // 删除当前图片文件的链接（如果接受文件路径是数组时 使用此方法）
    handleRemove (url) {
      const delIndex = this.ruleForm.appendixList.findIndex(e => { return e.url == url })
      this.ruleForm.appendixList.splice(delIndex, 1)
    },
    // 确认收货
    takeDeliveryOfGoods () {
      this.$confirm('是否确认收货？确认收货前，请确认商品已签收！', '确认收货', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: this.orderId

        }
        this.$api.serviceConfirmReceipt(data).then(res => {
          if (res.code == 0) {
            this.$message.success('操作成功')
            this.getOrderStatus()
          }
        })
      }).catch(() => {
      })
    },

    // 重新提交
    handlerResubmit () {
      this.$confirm('该订单是否重新提交审核？', '重新提交审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: this.orderId
        }
        this.$api.resubmitOrder(data).then(res => {
          if (res.code == 0) {
            this.$message.success('操作成功')
            this.getOrderStatus()
            this.getProcess()
          }
        })
      }).catch(() => {

      })
    },
    // 选择支付方式弹框内的设置默认
    selectPayDefault (e) {
      if (this.setPay.payment) {
        if (e == true) {
          localStorage.setItem('setPayPayment', 1)
          localStorage.setItem('setPayPayDefault', true)
        } else {
          localStorage.removeItem('setPayPayment')
          localStorage.removeItem('setPayPayDefault')
        }
      }
    }

  }
}
</script>

<style scoped  lang="scss">
.logisticsBtn{
  padding-top:51px;
}
.boldSize{
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}
.boldSize16{
  font-size: 18px;
  font-weight: 400;
  color: #333333;
}
.size14{
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}
@media screen and (max-width:1280px){
   .borderWire{
    width: 1px;
    background-color: #EDEDED;
    margin-top: 4.5% !important;
}
  .boldSize{
  font-size: 18px !important;
  font-weight: bold;
  color: #333333;
}
.boldSize16{
  font-size: 16px !important;
  font-weight: 400;
  color: #333333;
}
.approver{
  margin-top: 10px ;
   font-size: 14px !important;
   font-weight: 400
}
.size14{
  font-size: 14px !important;
  font-weight: 400;
  color: #666666;
}
  .logisticsBtn{
  padding-top:51px !important;
}
 /deep/.el-table th > .cell {
  font-size: 14px !important;
 }
.contentDetails {
  margin-bottom: 20px;
  padding: 16px 20px  !important;
  background-color: #ffffff;
  box-sizing: border-box;
   .contentDetails_item{
    width: 50%;
    height: auto;
  }
  .afterSales{
    width: 120px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #F33F3F;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    color: #F33F3F;
  }
 .addressWidth{
      width: 560px !important;
    }
  .details {
   display: flex;
    flex-wrap:wrap;
  margin-top: 10px;

    .details_item{
      width: auto !important;
      line-height: 40px;
     .details_title{
       width: 85px !important;
      font-size: 14px !important;
      font-weight: 400;
      line-height: 0px;
      color: #999999;
      text-align: right;
      display: inline-block;
    }

    .details_value{
      font-size: 14px;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      padding-left:12px;
    }
    }

  }

  .remarkMessage{
    margin-top: 18px;
    .remarkMessage_remark{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .fourteenTitle_buymessage{
      margin-left: 28px !important;
    }
    .remarkMessage_remark_item{
      width: 50%;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
    .fourteenTitle{
      width: 62px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
    }
    .fourteenDetails {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
  }
  }
  .title {
    font-size: 16px !important;
    font-weight: 400;

  }

  .title_too{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-top: 18px;
    padding-left: 28px !important;
  }
  .titleblue{
    display: flex;
    align-items: center;
     &:before {
          display: inline-block;
          content: '';
          width: 4px;
          height: 16px;
          background-color: #2d7edf;
          margin-right: 10px;
        }
    }
  .titleBtn{
    display:flex;
    justify-content: space-between;
  }
    .box {
      padding: 0px 20px !important;
      background: #f5f8ff;
      box-sizing: border-box;
      padding-left: 25px;

    }

  }
}

.contentDetails {
  margin-bottom: 20px;
  padding: 16px 20px ;
  background-color: #ffffff;
  box-sizing: border-box;
  .borderWire{
    width: 1px;
    background-color: #EDEDED;
    margin-top: 0%;
    margin-left: 8%;
    margin-right: 2%;
}
  .contentDetails_box{
    display: flex;
    justify-content: left;

  .details {
    display: flex;
    margin-top: 10px;
    flex-wrap:wrap;
    // margin-right: 250px;

  .contentDetails_item{
    width: 50%;
    display: flex;
  }

    .details_item{
      min-width: 100px;
      line-height: 40px;
     .details_title{
       width: 82px;
      font-size: 16px;
      font-weight: 400;
      line-height: 0px;
      color: #999999;
      text-align: right;
      display: inline-block;
    }

    .details_value{
      font-size: 16px;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      padding-left:12px;
    }
    }

  }
  }
  .afterSales{
    width: 120px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #F33F3F;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    color: #F33F3F;
  }
 .addressWidth{
      // width: 560px !important;
    }
  .order_details {
    display: flex;
    justify-content: left;
    flex-wrap:wrap;
    margin-top: 10px;
    .blankBox{
      width: 3%;
    }
    .order_details_item{
      // min-width: 255px;
      line-height: 40px;
     .order_details_title{
      width: 82px;
      font-size: 14px;
      font-weight: 400;
      line-height: 0px;
      color: #999999;
      text-align: right;
      display: inline-block;
    }

    .order_details_value{
      font-size: 14px;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      padding-left:12px;
    }
    }

  }
  .remarkMessage{
    margin-top: 18px;
    .remarkMessage_remark{
      display: flex;
      align-items: center;
    }
     .remarkMessage_remark_item{
      width: 50%;
      display: flex;
      align-items: center;
    }
    .fourteenTitle{
      width: 62px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
    }
     .fourteenTitle_buymessage{
      width: 62px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        margin-left: 26px;
    }
    .fourteenDetails {
      width: 78%;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      padding-bottom: 0;
      background-color: #F5F8FF;
      margin-left: 10px;
      margin-right: 10px;

      padding-left: 10px;

  }
  }
  .title {
    font-size: 16px;
    font-weight: 400;

  }

  .title_too{
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-top: 18px;
    padding-left: 25px;
  }
  .titleblue{
    display: flex;
    align-items: center;
     &:before {
          display: inline-block;
          content: '';
          width: 4px;
          height: 16px;
          background-color: #2d7edf;
          margin-right: 10px;
        }
  }
.titleBtn{
  display:flex;
  justify-content: space-between;
}
  .box {
    background: #f5f8ff;
    box-sizing: border-box;
    padding-left: 25px;

  }

}
.fourteenTitle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.fourteenDetails {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  padding-bottom: 20px;
 .fourteenDetails_item{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
  .fourteenDetails_item_title{
    font-size: 14px;
    font-weight: 400;
    line-height: 0px;
    color: #666666;
  }
 }
}
.fourteenDetails_title{
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10px;
  margin-top: 20px;
}
.red{
  color: red !important;
}
.total_prices{
  margin-top: 24px;
  display: flex;
  justify-content: right;
  font-size: 16px;
}
.botton_btn{
  padding:10px 20px 20px 20px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialogBtn{
  display: flex;
  justify-content: right;

}
.setPayDialogBtn{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  align-items: center;
   .setPay_payment_btn_quxiao{
    width: 120px;
    height: 36px;
    border: 1px solid #D9D9D9;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
  }
  .setPay_payment_btn_queren{
    width: 120px;
    height: 36px;
    background: #4168E7;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    border: 0;
  }
}
 .setPay_payment_btn_quxiao{
    width: 120px;
    height: 36px;
    border: 1px solid #D9D9D9;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
  }
 .setPay_payment_btn_queren{
    width: 120px;
    height: 36px;
    background: #4168E7;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    border: 0;
  }
.dialogBtnright{
  display: flex;
  justify-content: right ;
   .setPay_payment_btn_quxiao{
    width: 120px;
    height: 36px;
    border: 1px solid #D9D9D9;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
  }
  .setPay_payment_btn_queren{
    width: 120px;
    height: 36px;
    background: #4168E7;
    opacity: 1;
    border-radius: 4px;
    line-height: 0;
    border: 0;
  }
}

 .fourteen{
    font-size: 14px !important;
  }

  .addressHeader{
    display: flex;
    justify-content: right;
    align-items: center;
  }
  .setPay_payment{
    display: block;
    margin-bottom: 15px;
  }

  .payMoney{
    background: #F5F8FF;
    padding: 20px;
    margin-bottom: 30px;
    .payMoney_should{
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10px;

    }
    .payMoney_already{
      font-size: 16px;
      font-weight: bold;
      color: #4168E7;
      margin-bottom: 10px;

    }
    .payMoney_box{
        display: flex;
        justify-content: right;
        align-items:center;
       .payMoney_money{
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      padding-right: 10px;
    }
    .payMoney_mo{
      padding-right: 6px;
      color: #4168E7;
    }
    }
    .payMoney_text{
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      display: flex;
      justify-content: right;
      align-items: center;
      margin-top: 15px;
      .payMoney_text_item{
        padding-left: 20px;
      }
    }
  }
  /deep/.el-input-number__increase{
    right:0
  }
  .audit_title{
    font-weight: bold;
    margin-bottom: 20px;font-size: 16px;
  }
  .audit_textarea{
    margin-top: 10px;
    /deep/.el-textarea__inner{
      margin-top: 13px;
      height: 132px;
    }
  }
  // 售后弹框
  .deletegroup {
    .lb-table{
      border: none;
    }
  /deep/.el-dialog .el-dialog__header {
    background-color: #fff;
  }
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #D9D9D9;
  }
  /deep/.el-dialog__body {
    padding: 30px 30px 10px 30px;
  }

}

  .demo-ruleForm{
    /deep/.el-textarea__inner{
      height: 132px;
    }
      /deep/.el-form-item__label{
      float: none;
       word-break: break-word;
      }
      /deep/.el-form-item{
        margin-bottom: 10px;
      }
      /deep/.el-form-item__content{
        margin-left: 0 !important;
      }
    /deep/.el-dialog__body{

      }
  }
.dialogafterSaleClass{
  /deep/.el-dialog .el-dialog__header {
    background-color: #fff;
    .el-dialog__headerbtn .el-dialog__close{
      color: #333333 !important;
    }
  }
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #D9D9D9;
  }
  /deep/.el-dialog__body{
     padding: 10px 30px 30px 30px;
  }
  .deletegroup_title{
     display: flex;
     align-items: center;
     .deletegroup_title_item{
        font-size: 18px;
        font-weight: bold;
        color: #333333;
     }
     .deletegroup_title_blue{
        font-size: 18px;
        font-weight: 400;
        color: #4168E7;
     }
  }
}
/deep/.el-upload .el-upload--picture-card{
  width: 124px;
  height: 124px;
  line-height: 128px;
}
/deep/.el-upload-list__item-thumbnail{
   width: 124px;
  height: 124px;
  img {
     width: 124px;
  height: 124px;
  }
}
/deep/.el-upload-list--picture-card .el-upload-list__item{
     width: 124px;
  height: 124px;
}
.approver{
  margin-top: 10px;
   font-size: 16px;
   font-weight: 400
}
// 白色背景蓝色字体按钮
.whiteBtn{
  width: 120px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #4168E7;
  opacity: 1;
  border-radius: 4px;
  line-height: 0;
  color: #4168E7;
}

/deep/.el-table th > .cell{
  text-align: unset;
  font-size: 16px;
}
.fontWeight{
  font-weight: bold !important;
}
 .gift{
    display: inline-block;
    text-align: center;
    width: 54px;
    height: 24px;
    background: #feebeb;
    border-radius: 4px;
    margin-left: 25px;
    font-size: 14px;
    font-weight: 400;
    color: #F33F3F ;
    line-height: 23px;
    box-sizing: border-box;
  }
  .Manner{
    font-size: 16px;
    font-weight: bold;
    color: #4168E7;
    margin-top:12px

  }
</style>
